<template>
  <div class="main">
    <div class="goodDetailPage">
      <div class="linkPart">
        <div class="leftP">
          <div class="shopIcon">
            <img :src="shopIcon" alt="" />
          </div>
          <div class="linkBox">
            <el-link href="#" :underline="false">首页</el-link>
            <el-link href="#" :underline="false">所有商品</el-link>
            <el-link href="#" :underline="false">房间</el-link>
          </div>
          <div class="searchBox">
            <el-input
              v-model="inputSearch"
              placeholder="请输入内容"
              clearable
              :prefix-icon="Search"
            ></el-input>
          </div>
        </div>
        <div class="rightP">
          <div class="iconBox">
            <el-tooltip content="个人中心" placement="bottom">
              <i class="iconfont icon-gerenzhongxin" @click="personCenter"></i>
            </el-tooltip>
            <el-tooltip content="我的收藏" placement="bottom">
              <i class="iconfont icon-aixin" @click="myFavoriteBtn"></i>
            </el-tooltip>
            <el-tooltip content="购物车" placement="bottom">
              <i class="iconfont icon-gouwuche_o" @click="myCartBtn"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="navigation">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/shop' }"
            >家具商店</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/shop' }">{{
            spuInfo.categoryName
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ spuInfo.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="mainBoxPart">
        <div class="leftH">
          <div class="product-main-gallery">
            <div class="imgContent">
              <div
                class="fourItem"
                v-for="item in defauleSkuInfo.imageList"
                :key="item"
              >
                <img :src="item.imgUrl" alt="" />
              </div>
            </div>
          </div>
          <div class="product-identifier__container">
            <span>货号</span>
            <span class="goodsid">{{ defauleSkuInfo.serialNo }}</span>
          </div>
          <div class="serverBox">
            <div class="leftS">
              <div class="top">
                <i class="iconfont icon-tuihuodingdan"></i>
                <span @click="backGoodServer">退货政策</span>
              </div>
              <div class="bottom">改变主意了？没关系！</div>
            </div>
          </div>
          <div class="evalueBox">
            <div class="hBox">
              <div class="hLeft">
                <h3>大家晒</h3>
                <i class="iconfont icon-xingxing"></i>
                <p>已有{{ evaluteNum }}人晒单</p>
              </div>
              <div class="hRight">
                <span @click="evaluteShow">查看全部</span>
              </div>
            </div>
            <div class="showLit">
              <div class="list_item">
                <div class="imgBox"></div>
                <div class="textBox"></div>
              </div>
            </div>
          </div>
          <div class="goodsDetail">
            <h3 class="Title">商品详情</h3>
            <div class="descript">
              <div class="item_list">
                <span v-html="spuInfo.description"></span>
              </div>
            </div>
            <div class="designBox">
              <h3>设计师</h3>
              <span>{{ spuInfo.designer }}</span>
            </div>
          </div>
          <div class="goodsSizeBox">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="商品尺寸" name="1">
                <div class="sizeB">
                  <h3>商品尺寸</h3>
                  <div class="weight">
                    <h3>经检测，符合:&nbsp;</h3>
                    <span>{{ defauleSkuInfo.weight }}&nbsp;&nbsp;公斤</span>
                  </div>
                  <div class="weight">
                    <h3>宽度:&nbsp;</h3>
                    <span>{{ defauleSkuInfo.width }}&nbsp;&nbsp;厘米</span>
                  </div>
                  <div class="weight">
                    <h3>高度:&nbsp;</h3>
                    <span>{{ defauleSkuInfo.height }}&nbsp;&nbsp;厘米</span>
                  </div>
                  <div class="weight">
                    <h3>长度:&nbsp;</h3>
                    <span>{{ defauleSkuInfo.length }}&nbsp;&nbsp;厘米</span>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="保养说明与材质" name="2">
                <div class="baoyangBox">
                  <h3>保养说明</h3>
                  <div class="boxx">
                    {{ spuInfo.maintain }}
                  </div>
                  <h3>材质构成</h3>
                  <div class="boxx">
                    {{ spuInfo.material }}
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="设计师理念" name="3">
                <div class="designIdea">
                  <p>{{ spuInfo.designConcept }}</p>
                  <div class="designerBox">
                    <span>设计师</span>
                    <span>{{ spuInfo.designer }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <div class="recommendList">
            <h3>猜你喜欢</h3>
            <el-scrollbar>
              <div class="listBox">
                <div
                  class="list-item"
                  v-for="item in recommendGoodsList"
                  :key="item"
                >
                  <div class="imageBox" @click="viewDetail(item.serialNo)">
                    <img :src="item.defaultImage" alt="" />
                  </div>
                  <div class="spuNameBox">
                    {{ item.name }}
                  </div>
                  <div class="priceBox">
                    <span>￥</span>{{ item.price }}<span>.00</span>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="right">
          <div class="basic">
            <div class="leftTxt">
              <h3>{{ spuInfo.name }}</h3>
            </div>
            <div class="rightTxt">
              <span>￥</span>
              <span class="price">{{ defauleSkuInfo.price }}</span>
              <span>.00</span>
            </div>
          </div>
          <div class="attrbute" @click="colorServer">
            <div class="aLeft">
              <h3>{{ defauleSkuInfo.name }}</h3>
            </div>
            <div class="aRight">
              <i class="iconfont icon-youjiantou-copy"></i>
            </div>
          </div>
          <div class="num">
            <h1>数量</h1>
            <el-input-number
              v-model="cartnum"
              :min="1"
              :max="100"
              @change="handleChange"
            />
          </div>
          <div class="btnbox">
            <span class="joinCart" @click="addToCart">加入购物车</span>
            <i class="iconfont icon-aixin" @click="joinMyFavorite"></i>
          </div>
          <div class="location">
            <div class="lLeft">
              <i class="iconfont icon-dingwei"></i>
              <span>{{ locationArea }}&nbsp;</span>
            </div>
            <div class="lRight">
              <span>有货</span>
              <span class="point"></span>
            </div>
          </div>
          <div class="localNum" @click="addressServer">
            <div class="nLeft">
              <i class="iconfont icon-shangchang"></i>
              <span>查看本地商场库存</span>
            </div>
            <div class="nRight">
              <i class="iconfont icon-youjiantou-copy"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 退货服务抽屉 -->
    <el-drawer
      v-model="backGoodDrawer"
      :direction="rtl"
      size="25%"
      :before-close="handleClose"
    >
      <div class="tuihuoBox">
        <div class="tuihuoTitle">
          <h3>退货政策</h3>
        </div>
        <div class="tuihuotop">
          <h2>改变主意了? 没关系。</h2>
          <p>{{ returnPolicy }}</p>
        </div>
        <div class="tuihuoTitle2">
          <h3>• 官网购买商品的退货方式</h3>
          <div class="postSaleList">
            <div class="list_item" v-for="item in postSale" :key="item">
              <p>◎&nbsp;&nbsp;{{ item.PolicyItem }}</p>
            </div>
          </div>
        </div>
        <div class="tuihuoTitle3">
          <h3>• 实体门店购买商品的退货方式</h3>
          <div class="postSaleList">
            <div class="list_item">
              <p>
                ◎&nbsp;&nbsp;请携带完好的货品、原始购物凭证（银行卡付款需要银行卡消费凭证）至原购买商场办理退换货手续；您也可在其他任意实体商场退货，非原购买商场仅能以退换卡方式退款。
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 地址抽屉 -->
    <el-drawer
      v-model="addressDrawer"
      :direction="rtl"
      size="25%"
      :before-close="handleClose"
    >
      <div class="addressBox">
        <div class="titlearea">
          <h3>选择本地商场</h3>
        </div>
        <div
          class="itemListBox"
          v-for="item in checkShopList"
          :key="item"
          @click="checkShopBtn(item)"
        >
          <div class="provrance">
            <span>{{ item.location }}</span>
          </div>
          <div class="shop">
            <div class="leftArea">
              <h3>{{ item.shopname }}</h3>
              <p>{{ item.shopAddress }}</p>
            </div>
            <div class="rightbox">
              <div class="btndiv">
                <div class="checkbox" v-if="item.ischecked"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 颜色抽屉 -->
    <el-drawer
      v-model="colorDrawer"
      :direction="rtl"
      size="25%"
      :before-close="handleClose"
    >
      <div class="colorBox">
        <h3>颜色</h3>
        <div class="colorList">
          <div
            class="listItem"
            v-for="(item, index) in spuInfo.skuList"
            :key="item"
            @click="choseskuInfoBtn(index)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 评价页面抽屉 -->
    <el-drawer
      v-model="evaluteDrawer"
      :direction="rtl"
      size="100%"
      :before-close="evaluteClose"
    >
      <div class="eldrawerM">
        <div class="reviewpanelheader">
          <div class="headerBox">
            <div class="headerLeft">
              <div class="imageBox">
                <img :src="defauleSkuInfo.defaultImg" alt="" />
              </div>
              <div class="text">
                <div class="topB">
                  <h3>{{ defauleSkuInfo.name }}</h3>
                  <span>￥</span>
                  <span class="price">{{ defauleSkuInfo.price }}</span>
                  <span>.00</span>
                </div>
                <div class="bottomB">
                  <span>{{ defauleSkuInfo.displayName }}</span>
                </div>
              </div>
            </div>
            <div class="headerRight">
              <i
                class="iconfont icon-gouwuchetianjia cart"
                title="添加到购物车"
              ></i>
              <i class="iconfont icon-aixin favorite" title="我的收藏"></i>
            </div>
          </div>
        </div>
        <div class="bodyBox">
          <div class="TitleBox">
            <h3>大家晒</h3>
            <i class="iconfont icon-xingxing"></i>
            <p>已有{{ evaluteNum }}人晒单</p>
          </div>
          <div class="evlateBox" v-for="item in evaluateList" :key="item">
            <div class="list_item">
              <div class="infoBox">
                <div class="avaterBox">
                  <img :src="item.createUserAvatar" alt="" />
                </div>
                <div class="info">
                  <h3>{{ item.createUserName }}</h3>
                  <span>{{ item.createdTime }}</span>
                </div>
              </div>
              <div class="goodsInfo">已购商品：{{ item.skuName }}</div>
              <div class="scoreBox">
                <star-view :score="item.score"></star-view>
              </div>
              <div class="content">
                {{ item.stringEvaluation }}
              </div>
              <div class="evelateImageBox">
                <div
                  class="evaImgBox"
                  v-for="sums in item.formatEvaluationModel.imageList"
                  :key="sums"
                >
                  <img :src="sums" alt="" />
                </div>
              </div>
              <div class="dianzan">
                <i class="iconfont icon-31dianzan"></i>
                <span>0人</span>
                <i class="iconfont icon-pinglun" @click="addComment(item)"></i>
              </div>
              <div class="commentReplayInfo">
                <div class="fristRate">
                  <div v-for="items in item.commentReplayList" :key="items">
                    <div class="listItem">
                      <div class="nameBox">
                        <div class="imageBox">
                          <img :src="items.createUserAvatar" alt="" />
                        </div>
                        <span class="name">{{ items.createUserName }}</span>
                      </div>
                      <span
                        class="contents"
                        @click="sendComment(item.serialNo, items)"
                        >：{{ items.content }}</span
                      >
                    </div>
                    <div
                      class="second"
                      v-for="sum in items.commentReplyList"
                      :key="sum"
                    >
                      <div class="listItem">
                        <div class="nameBox">
                          <div class="imageBox">
                            <img :src="sum.createUserAvatar" alt="" />
                          </div>
                          <span class="name">{{ sum.createUserName }}</span>
                        </div>
                        <span
                          class="contents"
                          @click="sendComment(item.serialNo, sum)"
                          >：{{ sum.content }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="backAsonw" v-if="!(item.sellerReplyInfo === null)">
                <div class="avaterPart">
                  <img :src="kefuAvaterImg" alt="" />
                  <h3>客服回复</h3>
                </div>
                <div class="contentB">
                  <span>{{ item.sellerReplyInfo.content }}</span>
                </div>
                <div class="dianzan">
                  <i class="iconfont icon-31dianzan"></i>
                  <span>0人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 输入框评价抽屉 -->
    <el-drawer
      v-model="inputReplayDrawer"
      direction="btt"
      size="20%"
      :with-header="false"
      :before-close="inputHandleClose"
    >
      <div class="evalutateInput">
        <el-input
          v-model="evaluateContent"
          type="textarea"
          rows="4"
          maxlength="300"
          show-word-limit
          ref="evalutateInputRef"
        />
        <el-button @click="cancleSave">取消</el-button>
        <el-button @click="submitInfo">发表</el-button>
      </div>
    </el-drawer>
    <el-drawer
      v-model="inputCommentDrawer"
      direction="btt"
      size="20%"
      :with-header="false"
      :before-close="inputHandleClose"
    >
      <div class="evalutateInput">
        <el-input
          v-model="commentContent"
          type="textarea"
          rows="4"
          maxlength="300"
          show-word-limit
          ref="evalutateInputRef"
        />
        <el-button @click="inputCommentDrawer = !inputCommentDrawer"
          >取消</el-button
        >
        <el-button @click="submitCommentInfo">发表</el-button>
      </div>
    </el-drawer>
    <footer-view></footer-view>
  </div>
</template>

<script>
import AMap from "AMap";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import kefuDemoImg from "../../assets/image/kefuDemo.jpg";
import DisImg5 from "../../assets/image/shopIconDemo.jpg";
import { getToken } from "@/utils/auth";
import address from "@/utils/address";
import {
  queryGoodsInfo,
  queryGoodsList,
  evaluateInfo,
  queryCommentReplay,
  saveCommentReplay,
  saveCommentInfo,
} from "@/api/goods";
import { saveCollectionInfo, saveCartInfo } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      // 评价个数
      address: address,
      evaluteNum: 0,
      backGoodDrawer: false,
      colorDrawer: false,
      addressDrawer: false,
      evaluteDrawer: false,
      inputReplayDrawer: false,
      inputCommentDrawer: false,
      locationArea: "正在定位",
      cartnum: 1,
      // 评论输入框显示与否
      evalutateInput: false,
      evaluateContent: "",
      commentContent: "",
      shopIcon: DisImg5,
      // 客服头像
      kefuAvaterImg: kefuDemoImg,
      inputSearch: "",
      goodsList: {},
      evaluateList: [],
      commentReplayList: [],
      commentRepalyInfo: {},
      addCommentInfo: {},
      // 退货政策
      returnPolicy:
        "您可在60天内（宜家俱乐部会员可在365天内），有完好的货品、原始购物凭证和发票（如已开具），我们将按照您购物时的支付方式退款，银行卡退款请携带原始签购单和银行卡。很抱歉：处理商品，定制商品、家用电器商品、以及被切割、裁剪和油漆过的产品， 不适用于退货政策。",
      // 售后
      postSale: [
        {
          PolicyItem:
            "在官网购买的用户：您可以在发货前登录官网，进入“我的订单”进行取消操作。如无法取消，请联系宜家客服热线或者在线联系宜家人工客服申请退换货。",
        },
        {
          PolicyItem: "提供有偿上门收货服务或自行邮寄退货商品至宜家指定商场。",
        },
        {
          PolicyItem:
            "建议您保留好包裹配送时的包装，以方便产品再次运输时使用以减少损坏。",
        },
        {
          PolicyItem:
            "我们收到退货商品并确认无误后，将在7日之内办理退款手续，钱款将按照原始支付方式退回。",
        },
        {
          PolicyItem:
            "您也可以携带完好的货品、原始购物凭证和发票（如已开具）至就近实体门店办理退货手续。",
        },
      ],
      checkShopList: [
        {
          location: "上海市",
          shopname: "临港商场",
          shopAddress: "上海市浦东新区南汇新城镇临港大道1550号",
          ischecked: false,
        },
        {
          location: "上海市",
          shopname: "上海宝山市场",
          shopAddress: "上海市宝山区沪太路1818号",
          ischecked: false,
        },
      ],
      spuInfo: [],
      defauleSkuInfo: [],
      recommendGoodsList: [],
      recommendSkuInfo: [],
      userId: "",
    };
  },
  setup() {
    return {
      Search,
      ArrowRight,
    };
  },
  mounted() {
    let serialNo = this.$route.params.spuNo;
    let keyName = this.$route.params.keyName;
    sessionStorage.setItem("spuNo", serialNo);
    sessionStorage.setItem("keyName", keyName);
    this.getGoodInfoBySpuNo();
    this.getGoodsEvaluate();
    this.getLocation();
    this.getGoodInfoRecommend();
    this.init();
  },
  methods: {
    init() {
      let userInfo = this.$store.getters.getUserInfo;
      console.log(userInfo);
      if (userInfo) {
        this.userId = userInfo.userId;
      }
    },
    // 退货政策
    backGoodServer() {
      this.backGoodDrawer = !this.backGoodDrawer;
    },
    // 颜色抽屉
    colorServer() {
      this.colorDrawer = !this.colorDrawer;
    },
    addressServer() {
      this.addressDrawer = !this.addressDrawer;
    },
    // 评价展示
    evaluteShow() {
      this.evaluateList.forEach((item) => {
        let evaluationNo = item.serialNo;
        let params = {
          evaluationNo: evaluationNo,
        };
        queryCommentReplay(params).then((res) => {
          console.log(res);
          if (res.code === 0) {
            item.commentReplayList = res.page.list;
          }
        });
      });
      console.log(this.evaluateList);
      this.evaluteDrawer = !this.evaluteDrawer;
    },
    // 评价关闭触发
    evaluteClose() {
      this.evaluteDrawer = !this.evaluteDrawer;
    },
    choseskuInfoBtn(index) {
      this.defauleSkuInfo = this.spuInfo.skuList[index];
      this.colorDrawer = false;
    },
    // 获取定位
    getLocation() {
      const _this = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            _this.locationArea = result.city;
          } else {
            _this.locationArea = "定位失败，检查配置";
          }
        });
      });
    },
    // 判断是否有token
    judgeToken() {
      let token = getToken();
      if (token) {
        return true;
      } else {
        return false;
      }
    },
    // 个人中心
    personCenter() {
      if (this.judgeToken()) {
        this.$router.push("/personalInfo");
      } else {
        this.$router.push("/login");
      }
    },
    // 我的收藏
    myFavoriteBtn() {
      if (this.judgeToken()) {
        this.$router.push("/favorite");
      } else {
        this.$router.push("/login");
      }
    },
    // 我的购物车
    myCartBtn() {
      if (this.judgeToken()) {
        this.$router.push("/cart");
      } else {
        this.$router.push("/login");
      }
    },
    // 加入购物车
    addToCart() {
      let serialNo = this.defauleSkuInfo.serialNo;
      const cartList = {
        skuNo: serialNo,
        quantity: this.cartnum,
      };
      saveCartInfo(cartList).then((res) => {
        if (res.code === 0) {
          this.$message.success("成功加入到的我的购物车");
        }
      });
    },
    // 加入收藏
    joinMyFavorite() {
      let serialNo = this.spuInfo.serialNo;
      const collection = {
        objectNo: serialNo,
        objectType: "goods",
      };
      saveCollectionInfo(collection).then((res) => {
        if (res.code === 0) {
          this.$message.success("成功添加到我的收藏");
        }
      });
    },
    checkShopBtn(event) {
      let pos = this.checkShopList.indexOf(event);
      this.checkShopList.forEach((item) => {
        item.ischecked = false;
      });
      this.checkShopList[pos].ischecked = !this.checkShopList[pos].ischecked;
      this.addressDrawer = !this.addressDrawer;
    },
    getGoodInfoBySpuNo() {
      let spuNo = sessionStorage.getItem("spuNo");
      queryGoodsInfo(spuNo).then((res) => {
        if (res.code === 0) {
          this.spuInfo = res.spuInfo;
          this.defauleSkuInfo = this.spuInfo.skuList[0];
        }
      });
    },
    getGoodInfoRecommend() {
      let keyTxt = sessionStorage.getItem("keyName");
      keyTxt = keyTxt.charAt(keyTxt.length - 1);
      const search = {
        name: keyTxt,
      };
      // 获取推荐商品列表
      queryGoodsList(search).then((res) => {
        if (res.code === 0) {
          this.recommendGoodsList = res.page.list;
        }
      });
    },
    // 推荐商品详情
    viewDetail(spuNo) {
      queryGoodsInfo(spuNo).then((res) => {
        if (res.code === 0) {
          this.spuInfo = res.spuInfo;
          this.defauleSkuInfo = this.spuInfo.skuList[0];
          let top =
            document.documentElement.scrollTop || document.body.scrollTop;
          // 实现滚动效果
          const timeTop = setInterval(() => {
            document.body.scrollTop =
              document.documentElement.scrollTop =
              top -=
                50;
            if (top <= 0) {
              clearInterval(timeTop);
            }
          }, 10);
        }
      });
    },
    // 获取商品的评价信息
    getGoodsEvaluate() {
      let spuNo = sessionStorage.getItem("spuNo");
      let params = {
        spuNo: spuNo,
      };
      evaluateInfo(params).then((res) => {
        if (res.code === 0) {
          this.evaluateList = res.page.list;
          this.evaluteNum = this.evaluateList.length;
        }
      });
    },
    submitInfo() {
      if (this.evaluateContent === "") {
        this.$message.error("回复信息不能为空");
        return false;
      }
      this.commentRepalyInfo.content = this.evaluateContent;
      console.log(this.commentRepalyInfo);
      saveCommentReplay(this.commentRepalyInfo).then((res) => {
        if (res.code === 0) {
          this.$message.success("回复成功");
          this.inputReplayDrawer = false;
        }
      });
    },
    cancleSave() {
      this.evalutateInput = "";
      this.inputReplayDrawer = false;
    },
    sendComment(serialNo, evalutionInfo) {
      console.log(this.userId);
      console.log(evalutionInfo.createdBy);
      if (this.userId === evalutionInfo.createdBy) {
        this.$message.error("自己不能回复自己哦");
        return false;
      }
      console.log(serialNo);
      let commentRepalyInfo = {
        evaluationNo: serialNo,
        relativeNo: evalutionInfo.relativeNo,
        parentNo: evalutionInfo.parentNo,
        toUserId: evalutionInfo.createdBy,
        content: this.evaluateContent,
        type: "replay",
      };
      this.commentRepalyInfo = commentRepalyInfo;
      this.inputReplayDrawer = true;
    },
    inputHandleClose() {
      this.evalutateInput = "";
      this.inputReplayDrawer = false;
    },
    // 添加评论
    addComment(info) {
      console.log(info);
      let addInfo = {
        evaluationNo: info.serialNo,
        toUserId: info.createdBy,
        relativeNo: null,
        type: "comment",
      };
      this.addCommentInfo = addInfo;
      this.inputCommentDrawer = true;
    },
    // 发表评论
    submitCommentInfo() {
      if (this.commentContent === "") {
        this.$message.error("回复信息不能为空");
        return false;
      }
      this.addCommentInfo.content = this.commentContent;
      saveCommentInfo(this.addCommentInfo).then((res) => {
        if (res.code === 0) {
          this.$message.success("回复成功");
          this.inputCommentDrawer = false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.main {
  background-color: #fff;
  .goodDetailPage {
    min-height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .linkPart {
      width: 1240px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .leftP {
        display: flex;
        align-items: center;
        .shopIcon {
          width: 100px;
          height: 38px;
          margin: 0 20px 0 0;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .linkBox {
          width: 500px;
          .el-link {
            font-size: 14px;
            color: #111;
            font-weight: 700;
            margin: 0 30px 0 0;
            &:hover {
              border-bottom: 2px solid #244d4d;
            }
          }
        }

        .searchBox {
          margin: 0 0 0 20px;
          .el-input__wrapper {
            box-shadow: 0 0 0 0;
            height: 40px;
            width: 400px;
            border-radius: 30px;
            background-color: #f5f5f5;
            .el-input__inner {
            }
          }
        }
      }
      .rightP {
        .iconBox {
          display: flex;
          i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            font-size: 20px;
            height: 50px;
            border-radius: 50%;
            &:hover {
              background-color: #ccc;
            }
          }
        }
      }
    }
    .navigation {
      width: 1240px;
      display: flex;
      margin: 20px 0;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #f5f5f5;
    }
    .mainBoxPart {
      position: relative;
      width: 1240px;
      padding-top: 20px;
      .leftH {
        position: relative;
        min-height: 600px;
        width: 66%;
        float: left;
        display: flex;
        flex-direction: column;
        .product-main-gallery {
          .imgContent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .fourItem {
              img {
                width: 398px;
                height: 398px;
              }
            }
          }
        }
        .product-identifier__container {
          width: 100%;
          display: flex;
          height: 50px;
          align-items: center;
          justify-content: flex-start;
          span {
            font-size: 14px;
            color: #111;
            padding-right: 10px;
          }
          .goodsid {
            background-color: #f9f9f9;
            height: 30px;
            display: flex;
            padding: 0;
            align-items: center;
            justify-content: center;
          }
        }
        .serverBox {
          width: 100%;
          display: flex;
          .leftS {
            padding: 20px 0 0 20px;
            height: 110px;
            width: 245px;
            background-color: #f9f9f9;
            margin: 20px 30px 20px 0;
            .top {
              display: flex;
              align-items: center;
              i {
                font-size: 20px;
              }
              span {
                margin: 0 5px;
                font-weight: 700;
                font-size: 14px;
                cursor: pointer;
                &:hover {
                  transform: scale(1.1);
                }
              }
            }
            .bottom {
              margin-top: 5px;
              font-size: 12px;
              color: #484848;
              font-weight: 500;
            }
          }
        }
        .evalueBox {
          width: 100%;
          display: flex;
          .hBox {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .hLeft {
              display: flex;
              align-items: center;
              h3 {
                font-size: 24px;
                font-weight: 700;
                margin: 0 10px 0 0;
              }
              i {
                color: gold;
              }
              p {
                color: #767676;
                font-size: 12px;
                margin: 0 10px;
              }
            }
            .hRight {
              display: flex;
              span {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #dfdfdf;
                height: 40px;
                width: 100px;
                border-radius: 20px;
                color: #111;
                font-weight: 700;
                font-size: 14px;
                cursor: pointer;
                &:hover {
                  border: #244d4d 1px solid;
                }
              }
            }
          }
        }
        .goodsDetail {
          width: 100%;
          margin: 20px;
          .Title {
            font-size: 24px;
            font-weight: 700;
          }
          .descript {
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #484848;
            .item_list {
              min-height: 60px;
              display: flex;
              align-items: center;
              line-height: 40px;
              font-size: 12px;
            }
          }
          .designBox {
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #484848;
            h3 {
              font-weight: 700;
              font-size: 18px;
              color: #111;
            }
            span {
              height: 60px;
              display: flex;
              align-items: center;
            }
          }
        }
        .goodsSizeBox {
          width: 100%;
          .el-collapse-item {
            .el-collapse-item__header {
              height: 80px;
              font-weight: 700;
              font-size: 18px;
              color: rgba(0, 0, 0, 0.85);
              i {
                font-size: 14px;
              }
            }
            .sizeB {
              display: flex;
              flex-direction: column;
              h3 {
                font-size: 14px;
                font-weight: 700;
              }
              .weight {
                margin: 10px 0;
                display: flex;
              }
            }
            .baoyangBox {
              display: flex;
              flex-direction: column;
              h3 {
                font-size: 14px;
                font-weight: 700;
              }
              .boxx {
                margin: 10px 0;
                display: flex;
              }
            }
            .designIdea {
              width: 80%;
              display: flex;
              flex-direction: column;
              p {
                line-height: 30px;
              }
              .designerBox {
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                flex-direction: column;
                span {
                  font-size: 16px;
                  font-weight: 700;
                }
              }
            }
          }
        }
        .recommendList {
          margin: 40px 0;
          h3 {
            font-size: 22px;
          }
          .listBox {
            display: flex;
            width: 800px;
            .list-item {
              height: 470px;
              width: 300px;
              display: flex;
              margin: 10px 20px;
              flex-direction: column;
              .imageBox {
                height: 300px;
                width: 300px;
                overflow: hidden;
                img {
                  height: 100%;
                  &:hover {
                    transform: scale(1.1);
                  }
                }
              }
              .spuNameBox {
                font-size: 14px;
                font-weight: 700;
                color: #111;
                margin: 10px 0;
              }
              .priceBox {
                font-size: 18px;
                font-weight: 700;
                display: flex;
                align-items: flex-start;
                span {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
      .right {
        top: 20px;
        z-index: 1;
        transition: all 0.3s;
        position: -webkit-sticky;
        position: sticky;
        float: right;
        width: 28%;
        display: flex;
        flex-direction: column;
        .basic {
          height: 60px;
          justify-content: space-between;
          display: flex;
          border-bottom: 1px solid #f5f5f5;
          .leftTxt {
            display: flex;
            flex-direction: column;
            width: 65%;
            h3 {
              font-weight: 700;
              display: flex;
              flex-wrap: wrap;
            }
            span {
              color: #484848;
              font-size: 12px;
              font-weight: 400;
              display: flex;
              align-items: center;
              height: 30px;
            }
          }
          .rightTxt {
            display: flex;
            align-items: flex-start;
            span {
              font-size: 15px;
              color: #111;
              font-weight: 700;
            }
            .price {
              font-size: 20px;
            }
          }
        }
        .attrbute {
          height: 60px;
          display: flex;
          justify-content: space-between;
          .aLeft {
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            color: #111;
            h3 {
              font-weight: 600;
              font-size: 14px;
            }
            span {
              padding-top: 3px;
              font-size: 12px;
            }
          }
          .aRight {
            display: flex;
            align-items: center;
            i {
              font-size: 12px;
            }
          }
        }
        .num {
          height: 60px;
          margin: 20px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          h1 {
            font-size: 15px;
            color: #111;
            font-weight: 500;
          }
        }
        .btnbox {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .joinCart {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #244d4d;
            color: #fff;
            font-weight: 700;
            width: 280px;
            border-radius: 30px;
            height: 56px;
            cursor: pointer;
            &:hover {
              background-color: #126e6e;
            }
          }
          i {
            height: 55px;
            width: 55px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            &:hover {
              color: red;
            }
          }
        }
        .location {
          height: 60px;
          padding: 20px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #484848;
          border-bottom: 1px solid #f5f5f5;
          .lLeft {
            display: flex;
            align-items: center;
            i {
              font-size: 20px;
              padding: 0 10px 0 0;
            }
            span {
              font-size: 14px;
            }
          }
          .lRight {
            display: flex;
            font-size: 14px;
            align-items: center;
            .point {
              height: 10px;
              width: 10px;
              background-color: #0a8a00;
              border-radius: 50%;
              margin: 0 10px;
            }
            i {
              font-size: 12px;
            }
          }
        }
        .localNum {
          display: flex;
          align-items: center;
          color: #484848;
          height: 60px;
          justify-content: space-between;
          border-bottom: 1px solid #f5f5f5;
          .nLeft {
            padding: 10px 0;
            display: flex;
            align-items: center;
            i {
              font-size: 20px;
              padding: 0 10px 0 0;
            }
            span {
              font-size: 14px;
            }
          }
          .nRight {
            display: flex;
            align-items: center;
            i {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .eldrawerM {
    display: flex;
    flex-direction: column;
    align-items: center;
    .reviewpanelheader {
      position: absolute;
      top: 0;
      height: 110px;
      display: flex;
      border-bottom: 1px solid #ddd;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      z-index: 11;
      width: 80%;
      .headerBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .headerLeft {
          display: flex;
          align-items: center;
          .imageBox {
            height: 60px;
            width: 100px;
            display: flex;
            justify-content: center;
            img {
              height: 60px;
              width: 60px;
            }
          }
          .text {
            display: flex;
            flex-direction: column;
            .topB {
              display: flex;
              align-items: flex-end;
              color: #111;
              font-weight: 600;
              font-size: 14px;
              h3 {
                margin-right: 5px;
              }
              .price {
                font-size: 18px;
                color: #111;
                font-weight: 600;
              }
            }
            .bottomB {
              margin: 5px 0;
              font-size: 12px;
              color: #484848;
            }
          }
        }
        .headerRight {
          display: flex;
          align-items: center;
          .cart {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            width: 50px;
            background-color: #0058a3;
            color: #fff;
            font-size: 20px;
            border-radius: 50%;
            margin: 0 10px;
          }
          .favorite {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            width: 50px;
            background-color: #f5f5f5;
            color: #484848;
            font-size: 24px;
            border-radius: 50%;
          }
        }
      }
    }
    .bodyBox {
      margin-top: 40px;
      width: 80%;
      display: flex;
      flex-direction: column;
      .TitleBox {
        display: flex;
        align-items: center;
        h3 {
          font-size: 24px;
          font-weight: 700;
          margin: 0 10px 0 0;
        }
        i {
          font-size: 24px;
          font-weight: 700;
          color: gold;
        }
        p {
          color: #767676;
          font-size: 12px;
          margin: 0 10px;
        }
      }
      .evlateBox {
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        .list_item {
          .infoBox {
            display: flex;
            align-items: center;
            .avaterBox {
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                height: 60px;
                width: 60px;
                border-radius: 50%;
              }
            }
            .info {
              margin: 0 10px;
              display: flex;
              flex-direction: column;
              h3 {
                color: #111;
                font-size: 15px;
                font-weight: 700;
              }
              span {
                color: #484848;
                margin-top: 5px;
                font-size: 14px;
              }
            }
          }
          .goodsInfo {
            font-size: 12px;
            font-weight: 700;
            margin: 5px 0;
          }
          .content {
            color: #484848;
            font-size: 14px;
            margin: 10px 0;
            padding: 0 10px;
          }
          .dianzan {
            display: flex;
            align-items: center;
            height: 40px;
            span {
              margin: 0 10px;
              color: #979797;
              font-size: 14px;
              font-weight: 400;
            }
            i {
              &:hover {
                color: #244d4d;
                transform: scale(1.5);
              }
            }
          }
          .commentReplayInfo {
            .fristRate {
              .listItem {
                font-size: 12px;
                color: #979797;
                display: flex;
                align-items: center;
                margin-top: 10px;
                .nameBox {
                  display: flex;
                  align-items: center;
                  .imageBox {
                    height: 30px;
                    width: 30px;
                    img {
                      height: 100%;
                      width: 100%;
                      border-radius: 50%;
                    }
                  }
                  .name {
                    margin-left: 5px;
                    font-size: 14px;
                    color: #666;
                  }
                }
                .contents {
                  color: #111;
                  font-weight: 500;
                  font-size: 16px;
                  margin-top: 5px;
                  cursor: pointer;
                  &:hover {
                    transform: scale(1.1);
                  }
                }
              }
              .second {
                margin-left: 20px;
                font-size: 12px;
                color: #979797;
                .listItem {
                  font-size: 12px;
                  color: #979797;
                  display: flex;
                  align-items: center;
                  margin-top: 10px;
                  .nameBox {
                    display: flex;
                    align-items: center;
                    .imageBox {
                      height: 30px;
                      width: 30px;
                      img {
                        height: 100%;
                        width: 100%;
                        border-radius: 50%;
                      }
                    }
                    .name {
                      margin-left: 5px;
                      font-size: 14px;
                      color: #666;
                    }
                  }
                  .contents {
                    color: #111;
                    font-weight: 500;
                    font-size: 16px;
                    margin-top: 5px;
                    cursor: pointer;
                    &:hover {
                      transform: scale(1.1);
                    }
                  }
                }
              }
            }
          }
          .evelateImageBox {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            .evaImgBox {
              height: 230px;
              width: 200px;
              margin: 0 20px;
              img {
                height: 100%;
                width: 100%;
              }
            }
          }
          .backAsonw {
            margin: 20px 0;
            border: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            padding: 10px;
            .avaterPart {
              display: flex;
              align-items: center;
              img {
                height: 28px;
                width: 28px;
                border-radius: 50%;
              }
              h3 {
                color: #111;
                font-weight: 700;
                font-size: 14px;
                margin: 0 10px;
              }
            }
            .contentB {
              color: #484848;
              font-size: 14px;
              margin: 10px 0;
            }
          }
        }
      }
    }
  }
  .tuihuoBox {
    display: flex;
    flex-direction: column;
    .tuihuotop {
      display: flex;
      flex-direction: column;
      h2 {
        margin: 10px 0;
        font-size: 14px;
      }
      p {
        text-indent: 12px;
        font-size: 14px;
        color: #111;
        line-height: 30px;
      }
    }
    .tuihuoTitle2 {
      margin-top: 30px;
      margin: 10px 0;
      font-size: 14px;
      .postSaleList {
        margin-top: 20px;
        .list_item {
          p {
            text-indent: 12px;
            line-height: 30px;
          }
        }
      }
    }
    .tuihuoTitle3 {
      margin-top: 30px;
      margin: 10px 0;
      font-size: 14px;
      .postSaleList {
        margin-top: 20px;
        .list_item {
          p {
            text-indent: 12px;
            line-height: 30px;
          }
        }
      }
    }
  }
  .colorBox {
    .colorList {
      display: flex;
      flex-direction: column;
      .listItem {
        display: flex;
        align-items: center;
        padding: 0 60px;
        font-size: 14px;
        color: #111;
        font-weight: 500;
        width: 100%;
        height: 90px;
        margin-top: 20px;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
        &:hover {
          border: 1px solid #244d4d;
        }
      }
    }
  }
  .addressBox {
    display: flex;
    flex-direction: column;
    .titlearea {
      font-size: 22px;
    }
    .itemListBox {
      position: relative;
      border-bottom: 1px solid #dfdfdf;
      .provrance {
        font-size: 12px;
        color: #484848;
        margin: 22px 0 10px 0;
      }
      .shop {
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        align-items: center;
        .leftArea {
          color: #484848;
          font-size: 14px;
          h3 {
            cursor: pointer;
            font-weight: 600;
            margin: 3px 0;
          }
          p {
            color: #484848;
            font-size: 13px;
          }
        }
        .rightbox {
          .btndiv {
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30px;
            width: 30px;
            border: 1px solid #484848;
            border-radius: 50%;
            .checkbox {
              display: flex;
              height: 20px;
              width: 20px;
              background-color: #484848;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }

  .evalutateInput {
    display: flex;
    justify-content: space-between;
    .el-textarea {
      margin-right: 20px;
    }
  }
}
</style>
